<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta
			name="viewport"
			content="width=device-width, initial-scale=1.0"
		/>
		<title>图书列表展示</title>
		<link
			rel="stylesheet"
			href="css/bootstrap.min.css"
		/>

		<link
			rel="stylesheet"
			href="css/list.css"
		/>
		<script
			type="text/javascript"
			src="js/jquery.min.js"
		></script>
		<script
			type="text/javascript"
			src="js/bootstrap.min.js"
		></script>
		<script src="js/jq-paginator.js"></script>
	</head>

	<body>
		<div class="bookContainer">
			<h2>图书列表展示</h2>
			<div class="navbar-justify-between">
				<div>
					<button
						class="btn btn-outline-info"
						type="button"
						onclick="location.href='book_add.html'"
					>
						添加图书
					</button>
					<button
						class="btn btn-outline-info"
						type="button"
						onclick="batchDelete()"
					>
						批量删除
					</button>
				</div>
			</div>

			<table>
				<thead>
					<tr>
						<td>选择</td>
						<td class="width100">图书ID</td>
						<td>书名</td>
						<td>作者</td>
						<td>数量</td>
						<td>定价</td>
						<td>出版社</td>
						<td>状态</td>
						<td class="width200">操作</td>
					</tr>
				</thead>
				<tbody></tbody>
			</table>

			<div class="demo">
				<ul
					id="pageContainer"
					class="pagination justify-content-center"
				></ul>
			</div>
			<script>
				const DEFAULT_PROP = {
					currentPage: 1,
					pageSize: 10,
				}

				getBookList(DEFAULT_PROP.currentPage, DEFAULT_PROP.pageSize)
				function getBookList(currentPage, pageSize) {
					$.ajax({
						url: '/book/getListByPage',
						type: 'get',
						data: { currentPage, pageSize },
						success(result) {
							const { code, data } = result
							if (code === 'NO_LOGIN') {
								// 用户未登录
								return (location.href = './login.html')
							}
							if (!data) return
							let { items: books, total } = data
							// 更新分页列表
							updatePageInfo(total, currentPage, pageSize)
							// 采用字符拼接
							let html = ``
							// 循环
							for (let key in books) {
								const { id, bookName, author, count, price, publish, statusCN } = books[key]

								// const {} = books[key]
								html += `
<tr>
    <td>
      <input type="checkbox" name="selectBook" value="${id}" id="selectBook" class="book-select">
    </td>
    <td>${id}</td>
    <td>${bookName}</td>
    <td>${author}</td>
    <td>${count}</td>
    <td>${price}</td>
    <td>${publish}</td>
    <td>${statusCN}</td>
    <td>
        <div class="op">
            <a href="book_update.html?id=${id}">修改</a>
            <a href="javascript:void(0)" onclick="deleteBook(${id})">删除</a>
        </div>
    </td>
</tr>`
							}
							// 添加
							$('tbody').html(html)
						},
						error(response) {
							if (response.status === 401) {
								location.href = './login.html'
								alert('用户未登录')
							}
						},
					})
				}

				//翻页信息
				function updatePageInfo(totalCounts, currentPage, pageSize) {
					if (currentPage === null) currentPage = DEFAULT_PROP.currentPage
					if (pageSize === null) pageSize = DEFAULT_PROP.pageSize
					$('#pageContainer').jqPaginator({
						totalCounts, //总记录数
						pageSize, //每页的个数
						visiblePages: 5, //可视页数
						currentPage, //当前页码
						first: '<li class="page-item"><a class="page-link">首页</a></li>',
						prev: '<li class="page-item"><a class="page-link" href="javascript:void(0);">上一页<\/a><\/li>',
						next: '<li class="page-item"><a class="page-link" href="javascript:void(0);">下一页<\/a><\/li>',
						last: '<li class="page-item"><a class="page-link" href="javascript:void(0);">最后一页<\/a><\/li>',
						page: '<li class="page-item"><a class="page-link" href="javascript:void(0);">{{page}}<\/a><\/li>',
						//页面初始化和页码点击时都会执行
						onPageChange: function (currentPage, type) {
							if (type !== 'init') getBookList(currentPage, this.pageSize)
						},
					})
				}
				function deleteBook(id) {
					var isDelete = confirm('确认删除?')
					if (isDelete) {
						//删除图书
						$.ajax({
							url: '/book/deleteBook',
							type: 'post',
							data: {
								id,
							},
							success(result) {
								if (result) {
									alert('删除成功')
									getBookList(DEFAULT_PROP.currentPage, DEFAULT_PROP.pageSize)
								} else {
									alert('删除失败')
								}
							},
						})
					}
				}
				function batchDelete() {
					var isDelete = confirm('确认批量删除?')
					if (isDelete) {
						//获取复选框的id
						var ids = []
						console.log($("input:checkbox[name='selectBook']:checked").val())

						$("input:checkbox[name='selectBook']:checked").each(function () {
							console.log($(this))

							ids.push($(this).val())
						})
						console.log(ids)
						$.ajax({
							url: '/book/deleteBatch',
							type: 'post',
							data: {
								ids,
							},
							success(result) {
								if (result) {
									alert('批量删除成功')
									getBookList(DEFAULT_PROP.currentPage, DEFAULT_PROP.pageSize)
								} else {
									alert('批量删除失败')
								}
							},
						})
					}
				}
			</script>
		</div>
	</body>
</html>
